<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<link rel="stylesheet" href="style/style.css">
		<title></title>


	</head>
	<body>
		<!-- 左侧放大镜容器 -->
		<div class="container">
			<div class="small">
				<!-- 贴膜 -->
				<div class="wrap"></div>
				<!-- 左侧放大镜图片 -->
				<img src="images/timg.jpg" alt="">
				<!-- 小盒子 -->
				<span class="grayBox"></span>


			</div>
			<div class="choice-btn">
				<img src="images/timg.jpg" alt="">
				<img src="https://img.zcool.cn/community/01f9d55efda3d5a8012066216f132c.jpg@260w_195h_1c_1e_1o_100sh.jpg" alt="">
			</div>
		</div>
		<!-- 大图容器 -->
		<div class="big">
			<!-- 大图图片 -->
			<img src="images/timg.jpg" alt="">
		</div>

		<script type="text/javascript">
			function Magnifier() {
				//正方形小盒子
				this.square = document.querySelector('.grayBox')
				//小盒子容器
				this.small = document.querySelector('.small')
				//小图
				this.small_img = document.querySelector(".small img")

				//大盒子容器
				this.big = document.querySelector('.big')
				//大图片
				this.big_img = document.querySelector('.big img')
				//找到按钮
				this.index = 0
				this.btns = document.querySelectorAll('.choice-btn img')
				//为了提高性能 获取盒子宽度必须要在外面获取
				//获取正方形盒子的宽度
				this.square_size = {
					width: parseInt(getComputedStyle(this.square).width),
					height: parseInt(getComputedStyle(this.square).height)
				}
				// 获取小盒子容器宽高;

				this.small_size = {
					width: this.small.offsetWidth,
					height: this.small.offsetHeight
				}
				//获取大容器宽高
				this.big_size = {
					width: parseInt(getComputedStyle(this.big).width),
					height: parseInt(getComputedStyle(this.big).height)
				}
				
				//获取大图片的宽高
				this.big_img_size = {
					width: parseInt(getComputedStyle(this.big_img).width),
					height: parseInt(getComputedStyle(this.big_img).height)
				}
				this.bindEvent()
			}


			Magnifier.prototype.bindEvent = function() {

				var self = this
				//元素显示隐藏
				this.small.onmouseover = function() {

					self.square.style.display = 'block'
					self.big.style.display = 'block'

				}
				this.small.onmouseout = function() {
					self.square.style.display = 'none'
					self.big.style.display = 'none'
				}


				//鼠标移动的时候 小盒子也跟着移动
				this.small.onmousemove = function(evt) {
					//兼容性
					let e = evt || event
					//边界值检测：先计算在赋值
					//找极值；判定边界
					//数据预处理

					let _left = e.offsetX - 50
					let _top = e.offsetY - 50

					if (_left < 0)[
						_left = 0
					]
					if (_top < 0) {
						_top = 0
					}
					//小盒子x轴最大边界值
					let max_left = self.small_size.width - self.square_size.width - 8
					if (_left > max_left) {
						_left = max_left
					}



					//小盒子y轴最大边界值
					let max_top = self.small_size.height - self.square_size.height - 8
					if (_top > max_top) {
						_top = max_top
					}

					self.square.style.left = _left + 'px'
					self.square.style.top = _top + 'px'

					//计算两个盒子位移的百分比  要相等 
					let prop_left = (_left / max_left).toFixed(2)
					let prop_top = (_top / max_top).toFixed(2)

					//大盒子最大移动距离
					
					let big_box_max_left = self.big_img_size.width - self.big_size.width;
					
				let big_box_max_top=self.big_img_size.height-self.big_size.height;
					console.log(big_box_max_top);
					self.big_img.style.left = -big_box_max_left * prop_left + 'px'
					 self.big_img.style.top = -big_box_max_top * prop_top + 'px'
				}
				
				for(let i=0;i<this.btns.length;i++){
					this.btns[i].index=i
					this.btns[i].onmouseover=function(){
						console.log(1);
						self.index=this.index
						self.small_img.src=this.src
						self.big_img.src=this.src
					}
				}
				
			}
			let bg = new Magnifier()
		</script>
	</body>
</html>
